<template>
  <div class="main-box scroll">
    <div class="table-box">
      <ProTable
        ref="proTable"
        title="公告列表"
        highlight-current-row
        :columns="columns"
        :request-api="getReportList"
        :pagination="true"
        :show-summary="false"
        :init-param="initParam"
        :indent="20"
        :search-col="{ xs: 1, sm: 1, md: 2, lg: 4, xl: 4 }"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader="">
          <el-button type="primary" @click="reporting()">生成报告</el-button>
        </template>
        <!--Expand 表格操作--
        <template #file_name="scope">
          <div class="linkCls"
            <el-icon><Document /></el-icon>
            <span style="margin-right: 5px" @click="windOpen(scope.row.file_link)">{{ scope.row.file_name }}</span>
            <el-icon><Download /></el-icon>
          </div>
        </template>
        <v-if="thisPermission.update" -->
        <template #operation="scope">
          <el-button type="primary" link @click="windOpen(scope.row.file_link)">查看</el-button>
        </template>
      </ProTable>
      <!-- <modalAddOrEdit ref="addOrEditReportRef" @refresh="refresh" /> -->
    </div>
  </div>
</template>

<script setup lang="ts" name="noticeManagement">
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Report } from "@/api/interface/reportManagement";
import { getReportList, getReporting } from "@/api/modules/reportManagement/reportView";
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
// import { useHandleData } from "@/hooks/useHandleData";
// import modalAddOrEdit from "@/views/sysManagement/notice_management/component/modal_add_or_edit.vue";
// import { useRoute } from "vue-router";
// import { useAuthStore } from "@/stores/modules/auth";
// const route = useRoute();
// const authStore = useAuthStore();
// const thisPermission = computed(() => authStore.permissionListGet[route.name as string] || {});
// import { ElMessage } from "element-plus";
// ProTable 实例
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns = reactive<ColumnProps<Report.ResReportList>[]>([
  { prop: "name", label: "报告名称", width: 250 },
  { prop: "cycle", label: "报告周期", width: 250 },
  { prop: "created_at", label: "报告日期", search: { el: "date-picker", props: { type: "datetimerange" }, span: 2 }, width: 180 },
  { prop: "user", label: "创建人", width: 250 },
  { prop: "update_at", label: "最后修改时间" },
  { prop: "operation", label: "操作", fixed: "right", width: 250 }
]);
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({});
// 新建编辑公告
// const addOrEditReportRef = ref<InstanceType<typeof modalAddOrEdit> | null>(null);

// 删除公告
// const deleteAccount = async (params: any[]) => {
//   const toDoList: string[] = [];
//   const notToDoList: string[] = [];
//   const ids: number[] = params.map(item => {
//     if (item.id) {
//       toDoList.push(item.name);
//     } else {
//       notToDoList.push(item.name);
//     }
//     return item.id;
//   });
//   await useHandleData(ReportTerminate, { ids: ids }, ["删除", "公告"], toDoList, notToDoList);
//   proTable.value?.getTableList();
// };
const windOpen = (link: string) => {
  window.open(link);
};
// const refresh = () => {
//   proTable.value?.getTableList();
// };
const reporting = async () => {
  const { data } = await getReporting();
  ElMessage.success(`${data}`);
};
</script>

<style lang="scss" scoped>
.main-box {
  flex-direction: row;
  height: 100%;
  &-left {
    display: flex;
    width: 250px;
    margin-right: 10px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 0 8px 0 #e6e6e6;
  }
  &-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
  }
}
.linkCls {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
  vertical-align: middle;
  cursor: pointer;
}
</style>
